<template>
    <div>
        <div class="cameraBox">
            <video id="videoCamera" class="videoCamera" :width="videoWidth" :height="videoHeight">
            </video>
            <canvas id="canvasCamera" class="canvasCamera" :width="videoWidth" :height="videoHeight">
            </canvas>
            <div>
                <el-button @click="photograph">拍照</el-button>
                <el-button v-if="flag" @click="openCamera">打开摄像头</el-button>
                <el-button v-else @click="closeCamera">关闭摄像头</el-button>
                <el-button @click="resetPhoto">重置</el-button>
                <el-button @click="goStuInfoEntry">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                flag:false,
                videoWidth: 500,
                videoHeight: 350,
                thisVideo: null,
                thisContext: null,
                thisCanvas: null,
                imgSrc: "",
            };
        },
        mounted(){
            this.openCamera();
        },
        methods: {
            resetPhoto(){
                this.thisCanvas = document.querySelector(".canvasCamera");
                this.thisContext = this.thisCanvas.getContext("2d");
                this.thisContext.clearRect(0, 0, this.videoWidth, this.videoHeight);
            },
            // photograph(){
            //     this.thisCanvas = document.querySelector(".canvasCamera");
            //     this.thisContext = this.thisCanvas.getContext("2d");
            //     this.thisContext.drawImage(
            //         this.thisVideo,
            //         0,
            //         0,
            //         this.videoWidth,
            //         this.videoHeight,
            //     );
            //     //this.imgSrc = this.thisCanvas.toDataURL("image/png");
            // },
            goStuInfoEntry() {
                console.log(this.imgSrc);
                this.$router.push({
                    name: "stuInfoEntry",
                    query: {
                    imgSrc: this.imgSrc,
                    },
                });
            },
            photograph() {
            this.thisCanvas = document.querySelector(".canvasCamera");
            this.thisContext = this.thisCanvas.getContext("2d");
            this.thisContext.drawImage(this.thisVideo, 0, 0, 100, 80);
            this.imgSrc = this.thisCanvas.toDataURL("image/png", 0.1);
            },
            openCamera(){
                this.flag = false;
                this.thisVideo = document.getElementById("videoCamera");
                if (navigator.mediaDevices === undefined) {
                    navigator.mediaDevices = {};
                }
                if (navigator.mediaDevices.getUserMedia === undefined) {

                    navigator.mediaDevices.getUserMedia = function (constraints) {
                        let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
                        if (!getUserMedia) {
                            return Promise.reject(new Error("请更换浏览器"));
                        }
                        return new Promise((resolve , reject) => {
                            getUserMedia.call(navigator, constraints, resolve, reject);
                        });
                    };
                }
                        const constraints = {
                            audio: false,
                            video:{
                                width: this.videoWidth,
                                height: this.videoHeight,
                            },
                        };
                        navigator.mediaDevices
                        .getUserMedia(constraints)
                        .then((res) => {
                            console.log(res);
                            console.log(this.thisVideo);
                            if ("srcObject" in this.thisVideo){
                                this.thisVideo.srcObject = res;
                            } else {
                                this.thisVideo.src = window.URL.createObjectURL(res);
                            }
                                

                            this.thisVideo.onloadedmetadata = function () {
                                console.log("视频元数据加载完毕");
                                console.log(this);
                                this.play();
                            };
                        })
                        .catch((err) =>{
                            console.log(err);
                            this.$message({
                                message: "没有开启摄像头或者浏览器不支持请求更换浏览器",
                                type:"warning",
                            });
                        });
                    },
                    closeCamera(){
                        if(this.thisVideo && this.thisVideo !== null){
                            this.thisVideo.srcObject.getTracks()[0].stop();
                            this.flag = true;
                        }
                    },
                },
    };
</script>

<style lang="less" scoped>
div {
  .videoCamera {
    margin-right: 10px;
  }
}
</style>